@include('Home.head')
</head>
<body>
<div class="container" id="app1">
    <header data-am-widget="header" class="am-header am-header-default my-header">
        <div class="am-header-left am-header-nav">
            <a href="javascript:history.back(-1);" class="">
                <i class="am-header-icon am-icon-chevron-left"></i>
            </a>
        </div>
        <h1 class="am-header-title">
            <a href="#title-link" class="">@{{ goods.goodsname }}</a>
        </h1>
    </header>
    <!-- banner -->
    <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}'>
        <ul class="am-slides">
            {{--<li v-for="val in goodsImgName">--}}
                {{--<img src="http://www.baoli.com/img/admin/shop/1528184513.jpg">--}}
            {{--</li>--}}
            <li>
                <img src="/img/zs_.ban300.jpg">
            </li>
            <li>
                <img src="/img/zs_.ban600.jpg">
            </li>
            <li>
                <img src="/img/zs_.ban1200.jpg">
            </li>
            {{--<li>--}}
                {{--<img src="http://s.amazeui.org/media/i/demos/bing-3.jpg">--}}
            {{--</li>--}}
            {{--<li>--}}
                {{--<img src="http://s.amazeui.org/media/i/demos/bing-4.jpg">--}}
            {{--</li>--}}
        </ul>
    </div>
	<div class="gray-panel">
    	<div class="paoduct-title-panel">
        	<h1 class="product-h1">@{{ goods.goodsname }}</h1>
            <p><span class="am-fr product-title-gray-text"><i class="am-icon-star"></i>收藏</span><span class="bold">价格：</span><span class="red2">￥@{{ goods.rulingprice }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{--<span class="product-title-gray-text">积分：300积分</span></p>--}}
        </div>
        <div class="my-search-title-panel">
        	<ul class="am-avg-sm-4 am-text-center am-text-sm">
                <li class="am-text-center">库存<br />@{{ goods.total }}件</li>
                <li class="am-text-center">销量<br />@{{ goods.sold }}件</li>
            </ul>
    	</div>
        <div class="my-search-title-panel">
        <p class="my-search-titp-p am-text-sm bold">冷敷贴</p>
            <!-- <p class="my-search-titp-p am-text-sm bold">百草液</p> -->
            <div style="overflow:hidden">
            <form class="am-form-inline" role="form">
            	<button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickMinus()"><i class="am-icon-minus"></i></button>
                <input type="number" name="txtQty" v-model="stick" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="stickAdd()"><i class="am-icon-plus"></i></button>
            </form>
            </div>
            <p class="my-search-titp-p am-text-sm bold">百草液</p>
            <div style="overflow:hidden">
                <form class="am-form-inline" role="form">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidMinus()" ><i class="am-icon-minus"></i></button>
                    <input type="number" name="txtQty" v-model="liquid" disabled="disabled" class="am-form-field txt-qty am-text-center am-text-sm" style=" width:60px; margin-right:0px; height:40px; display:inline; float:left">
                    <button type="button" class="am-btn am-btn-default" style="float:left" v-on:click="liquidAdd()"><i class="am-icon-plus"></i></button>
                </form>
            </div>
            <hr data-am-widget="divider" style="" class="am-divider-default am-margin-bottom-sm"/>
            <div class="am-cf cart-panel">
                <p class="am-text-center">
                    <span v-if="memLeve.conditions != ''">
                        <span v-if="goods.rulingprice < memLeve.conditions">
                            <button type="button" v-if="user.registered != 0" class="am-btn am-btn-default am-radius am-btn-block" >低于现在等级</button>
                            <button type="button" v-if="user.registered == 0" v-on:click="add(goods.id)" class="am-btn am-btn-danger am-radius am-btn-block" >立即购买</button>
                        </span>
                        <span v-if="goods.rulingprice == memLeve.conditions">
                            <button type="button" v-on:click="add(goods.id)" v-if="user.credit3 < memLeve.credit3 " class="am-btn am-btn-danger am-radius am-btn-block" >立即购买</button>
                            <button type="button" v-on:click="addRedelivery(goods.id)" v-if="user.credit3 >= memLeve.credit3 " class="am-btn am-btn-danger am-radius am-btn-block" >立即复投</button>
                        </span>
                        <span v-if="goods.rulingprice > memLeve.conditions">
                            <button type="button" v-on:click="add(goods.id)" class="am-btn am-btn-danger am-radius am-btn-block" >立即购买</button>
                        </span>
                    </span>
                    <span v-if="memLeve.conditions == ''">
                        <button type="button" v-on:click="add(goods.id)" class="am-btn am-btn-danger am-radius am-btn-block" >立即购买</button>
                    </span>
                    {{--<button type="button" class="am-btn am-btn-danger am-radius am-btn-block" v-show="user.credit3 < memLeve.credit3">立即购买</button>--}}
                </p>
                {{--$user['credit3']>$userLeve['credit3']--}}
                {{--<p class="am-text-center" v-on:click="add(goods.id)" v-show="user.credit3 >= memLeve.credit3">--}}
                    {{--<button type="button" class="am-btn am-btn-danger am-radius am-btn-block" >立即复投</button>--}}
                {{--</p>--}}
            </div>
        </div>
    </div>
    <!-- 商品详情 -->
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2">
        <ul class="am-tabs-nav am-cf">
            <li class="am-active">
                <a href="[data-tab-panel-0]">详情</a>
            </li>
            <li class="">
                <a href="[data-tab-panel-1]">交易记录</a>
            </li>
        </ul>
        <div class="am-tabs-bd">
            <div data-tab-panel-0 class="am-tab-panel am-active">@{{ goods.spec }}</div>
            <div data-tab-panel-1 class="am-tab-panel ">

                <ul class="am-list am-list-static am-list-border am-list-striped am-text-sm">
                    <li v-for="val in orderData">@{{ val.name }}于@{{ val.createtime }}日购买成功</li>
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                    {{--<li>XXX于2015-6-5日购买成功</li>--}}
                </ul>

            </div>
        </div>
    </div>
    @include('Home.foot')
</div>
</body>
<script>
    var app = new Vue({
        el: "#app1",
        data: {
            goods:[],
            goodsImgName:[],
            stick:0, //冷敷贴
            liquid:0, //百草液
            memLeve:{
                level_name:'',
                conditions:0,
                credit3:0,
            },//等级
            user:[],//会员
            orderData:[],//交易记录
        },
        //事件
        methods: {
            //初始化 系统管理员列表
            initialize:function () {
                var id = this.obtain('id');
                if(id > 0){
                    //获取商品数据
                    $.post("/home/straightShop/goods",{'_token':'{{csrf_token()}}',class:'find',id:id},function (res) {
                        if(res.code){
                            app.goods = res.data.goods;
                            app.user = res.data.user;
                            app.orderData = res.data.orderData;
                            app.stick = parseInt(res.data.goods.straight);
                            // app.liquid = parseInt(res.data.goods.straight / 2);
                        } else {
                            layer.msg(res.data);
                        }
                    });
                } else {
                    window.location.href="/home/error";
                }

            },
            stickAdd:function () { //加冷敷贴
                if( app.stick >= app.goods.straight ) {
                    layer.msg('超出了范围');return;
                }
                app.stick = app.stick+1;
                app.liquid = app.liquid-1;
            },
            stickMinus:function () { //减
                if(app.stick <= 0) {
                    layer.msg('超出了范围');return;
                }
                app.stick -= 1;
                app.liquid += 1;
            },
            liquidAdd:function () { //加冷敷贴
                if( app.liquid >= app.goods.straight) {
                    layer.msg('超出了范围');return;
                }
                app.liquid = app.liquid+1;
                app.stick = app.stick-1;
            },
            liquidMinus:function () { //减
                if(app.liquid <= 0) {
                    layer.msg('超出了范围');return;
                }
                app.stick += 1;
                app.liquid -= 1;
            },
            //生成订单
            add:function (id) {
                layer.load(2);
                $.post("/home/order",{'_token':'{{csrf_token()}}',class:'add',id:id,liquid:app.liquid,stick:app.stick,Redelivery:0},function (res) {
                    layer.closeAll('loading');
                    if(res.code){
                        window.location.href="/home/orderpage?id="+res.data.id;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //复投
            addRedelivery:function (id) {
                layer.load(2);
                $.post("/home/order",{'_token':'{{csrf_token()}}',class:'add',id:id,liquid:app.liquid,stick:app.stick,Redelivery:1},function (res) {
                    layer.closeAll('loading');
                    if(res.code){
                        window.location.href="/home/orderpage?id="+res.data.id;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //获取url id
            obtain:function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == val){
                        return pair[1];
                    }
                }
            },
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    });
</script>
</html>
